<template>
  <div>
    <new-search-bar :searchFixed="true" bgSearch="c-bg-white c-pv24-i" @search='startSearch'></new-search-bar>
    <!-- 列表数据 -->
    <div class="c-ph24 c-mt24">
      <div class="c-pb30 c-flex-row c-flexw-wrap box-show c-br10" v-for="(item, index) in reservationList" :key="index" @click="goToReservationDetail(item.rtId)" :class="index == 0 ? '' : 'c-mt30'">
        <div class="c-ww600 c-hh300 c-text-hidden c-br-tr10 c-br-tl10">
          <img class="c-w100 c-h imgCloseBig" v-lazy="item.poster || require('@/assets/defult270.png')" :key="item.poster" alt="" />
        </div>
        <div class="c-flex-row c-flexw-wrap c-pt30 c-justify-sb c-w100 c-pl20 c-pr16">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-w100 c-pb20">{{item.themeName}}</div>
          <div class="c-fs26 c-fc-xmlred c-fw600" v-if="Number(item.price) > 0">
            <span class="c-fs20">{{'￥' | iosPriceFilter}}</span><span class="c-fs26">{{item.price | moneyStr}}</span>
          </div>
          <div class="c-fs22 c-fc-xmlred c-fw600" v-else> 免费</div>
          <div class="c-fs22 c-fc-gray">
            <span v-if="item.isShowOrder == 1">{{item.orderCount}}{{ !$isWxAppIos() ? '人已购买' : '人预约' }}</span>
            <span v-if="item.isShowOrder == 1 && item.isShowEnroll == 1" class="c-ph10">|</span>
            <span v-if="item.isShowEnroll == 1">{{item.enrollCount}}次预约</span>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :showLoading="isLoading" :noMoreData="loadingStatus == 'NO_MORE_DATA' && (reservationList && reservationList.length > 0)" :noData="reservationList.length == 0" :noDataText="'暂无约课'"></loading-status-tem>
    <nav-bottom-bar :itemIndex="13" v-if="showNavBottomBar"></nav-bottom-bar>
  </div>
</template>
<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import { utilJs } from "@/utils/common.js"
let pageIndex = 1; //当前页面
export default {
  name: 'ReservationList',
  components: {
    loadingStatusTem,
    newSearchBar,
    NavBottomBar
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      searchText: '',
      loadingStatus: " NO_MORE_DATA", //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      isLoading: false, // 是否已经加载
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      showNavBottomBar: false, // 是否显示底部菜单栏
      reservationList: [], // 约课列表
      pageSize: 10,
    }
  },
  methods: {
    // 搜索事件
    startSearch(e) {
      this.searchText = e.searchValue;
      pageIndex = 1;
      this.getList();
    },
    // 获取约课列表
    getList() {
      if (!this.isLoading) {
        this.isLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'reservations?page=' + pageIndex + '&limit=' + this.pageSize + '&themeName=' + this.searchText, function (res) {
          if (pageIndex == 1) {
            $this.reservationList = res.data;
          } else {
            $this.reservationList = [...$this.reservationList, ...res.data];
          }
          if ($this.pageSize * pageIndex >= res.total) {
            $this.loadingStatus = "NO_MORE_DATA";
          } else {
            $this.loadingStatus = "LOAD_MORE";
            pageIndex++;
          }
          $this.isLoading = false;
        })
      }
    },
    // 跳转约课详情
    goToReservationDetail(rtId) {
      this.$routerGo(this, "push", {
        path: "/activity/activityDetail",
        query: { ActivityNo: rtId, from: 'reservation' }
      });
    },
    //分享
    wechatShare: function () {
      let title = '约课列表';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.loadingStatus == 'LOAD_MORE') {
          that.getList();
        }
      });
    },
    initData() {
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.reservationList = [];
      this.searchText = "";
      this.getList();
    },
  },
  activated() {
    setDocumentTitle("约课列表");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.reservationList)) {
      this.initData()
    }
    this.companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
    if (this.companyAuth.companyNav && this.companyAuth.companyNav.length > 0) {
      let arrReservationFilter = this.companyAuth.companyNav.filter((item) => {
        return item.navType == 13;
      });
      this.showNavBottomBar = arrReservationFilter.length > 0;
    }
    this.isLoading = false;
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    // this.loadingStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>
<style scoped>
.box-show {
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);
}
</style>
